<template>
  <div id="app" >
    <div id="menuLeft">
<!--      <el-card style="height:100%;width:100%;">-->
        <div id="step1">
          <h4>数据选择：</h4>
          <el-cascader
                  ref="getSelectData"
                  placeholder="请选择需要渲染的数据"
                  v-model="dataValue"
                  :options="options"
                  @change="handleSelectChange"
                  filterable></el-cascader>
        </div>
        <div id="step2" >
          <h4>选择飞线图渲染方式</h4>
          <el-button @click="getDate">OD流量分析</el-button>
<!--          <el-button @click="clear">清除</el-button>-->
        </div>
<!--      </el-card>-->
    </div>
    <div ref="map" id="main" style="height:100%;width:100%;"></div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import 'echarts-gl'
  import 'echarts/extension/bmap/bmap'
  import ODData from '../../assets/js/TaxiODLine/ODData'
  export default {
    name: 'ODLine',
    data() {
      return {
        dataValue: [],
        // options: this.$store.state.data,
        // options: this.$store.state.dataLineOD[0].children,
        options: this.$store.state.dataLineOD,
        // 百度地图个性化模板
        mapStyle: {
          styleJson: [{
            "featureType": "land",
            "elementType": "geometry",
            "stylers": {
              "color": "#070d22ff"
            }
          }, {
            "featureType": "manmade",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "manmade",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "subwaystation",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "education",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "education",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "scenicspots",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "scenicspots",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "medical",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "medical",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": {
              "color": "#113549ff",
              "visibility": "on"
            }
          }, {
            "featureType": "green",
            "elementType": "geometry",
            "stylers": {
              "color": "#123a4bff",
              "visibility": "off"
            }
          }, {
            "featureType": "entertainment",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "shopping",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "transportation",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "playground",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "road",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "road",
            "elementType": "geometry.fill",
            "stylers": {
              "color": "#202f4aff"
            }
          }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": {
              "weight": 1.2
            }
          }, {
            "featureType": "road",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#3a507700"
            }
          }, {
            "featureType": "poilabel",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "poilabel",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "nationalwaysign",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "nationalwaysign",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "highwaysign",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "highwaysign",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "building",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "subwaylabel",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "provincialwaysign",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "tertiarywaysign",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "tertiarywaysign",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "town",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "town",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "city",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "water",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "estate",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "railway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "village",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "district",
            "elementType": "labels.text.fill",
            "stylers": {
              "color": "#d1c7c7ff",
              "weight": 30
            }
          }, {
            "featureType": "district",
            "elementType": "labels.text.stroke",
            "stylers": {
              "color": "#ffffff00",
              "weight": 0
            }
          }, {
            "featureType": "city",
            "elementType": "labels.text.stroke",
            "stylers": {
              "color": "#ffffff00",
              "weight": 0
            }
          }, {
            "featureType": "city",
            "elementType": "labels.text.fill",
            "stylers": {
              "color": "#cabebeff"
            }
          }, {
            "featureType": "subwaylabel",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "roadarrow",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "footbridge",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "crosswalk",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "underpass",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "parkingspace",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "local",
            "elementType": "labels",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "local",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "on",
              "weight": 1.2
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "on"
            }
          }, {
            "featureType": "fourlevelway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "13"
            }
          }, {
            "featureType": "fourlevelway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "14"
            }
          }, {
            "featureType": "fourlevelway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "15"
            }
          }, {
            "featureType": "fourlevelway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "16"
            }
          }, {
            "featureType": "fourlevelway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "17"
            }
          }, {
            "featureType": "fourlevelway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "18"
            }
          }, {
            "featureType": "fourlevelway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "19"
            }
          }, {
            "featureType": "fourlevelway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "20"
            }
          }, {
            "featureType": "fourlevelway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "21"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "13"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "14"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "15"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "16"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "17"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "18"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "19"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "20"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "21"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "13"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "14"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "15"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "16"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "17"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "18"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "19"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "20"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "21"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "13"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "14"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "15"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "16"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "17"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "18"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "19"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "20"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "21"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "13"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "14"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "15"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "16"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "17"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "18"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "19"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "20"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "13,21",
              "level": "21"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "11"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "12"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "13"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "14"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "15"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "16"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "17"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "18"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "19"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "20"
            }
          }, {
            "featureType": "arterial",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "21"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "11"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "12"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "13"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "14"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "15"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "16"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "17"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "18"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "19"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "20"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "21"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "11"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "12"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "13"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "14"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "15"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "16"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "17"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "18"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "19"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "20"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "11,21",
              "level": "21"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "on",
              "weight": 1.2
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "12"
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "13"
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "14"
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "15"
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "16"
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "17"
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "18"
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "19"
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "20"
            }
          }, {
            "featureType": "provincialway",
            "stylers": {
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "21"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "12"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "13"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "14"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "15"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "16"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "17"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "18"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "19"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "20"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "21"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "12"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "13"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "14"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "15"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "16"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "17"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "18"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "19"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "20"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
              "visibility": "off",
              "curZoomRegionId": "0",
              "curZoomRegion": "12,21",
              "level": "21"
            }
          }, {
            "featureType": "nationalway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "on",
              "weight": 1.2
            }
          }, {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
              "visibility": "on",
              "weight": 1.2
            }
          }, {
            "featureType": "transportationlabel",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "road",
            "elementType": "labels.text.stroke",
            "stylers": {
              "color": "#ffffff00",
              "weight": 0
            }
          }, {
            "featureType": "highway",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#ffffff00"
            }
          }, {
            "featureType": "nationalway",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#ffffff00"
            }
          }, {
            "featureType": "provincialway",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#ffffff00"
            }
          }, {
            "featureType": "cityhighway",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#ffffff00"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#ffffff00"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#ffffff00"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#ffffff00"
            }
          }, {
            "featureType": "fourlevelway",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "local",
            "elementType": "labels.icon",
            "stylers": {
              "visibility": "off"
            }
          }, {
            "featureType": "arterial",
            "elementType": "labels.text.stroke",
            "stylers": {
              "weight": 0.2
            }
          }, {
            "featureType": "cityhighway",
            "elementType": "labels.text.stroke",
            "stylers": {
              "weight": 0.2
            }
          }, {
            "featureType": "provincialway",
            "elementType": "labels.text.stroke",
            "stylers": {
              "weight": 0.2
            }
          }, {
            "featureType": "nationalway",
            "elementType": "labels.text.stroke",
            "stylers": {
              "weight": 0.4
            }
          }, {
            "featureType": "highway",
            "elementType": "labels.text.stroke",
            "stylers": {
              "weight": 0.2
            }
          }, {
            "featureType": "cityhighway",
            "elementType": "geometry",
            "stylers": {
              "weight": 1.2,
              "visibility": "on"
            }
          }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "weight": 1.2,
              "visibility": "on"
            }
          }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
              "weight": 1.2,
              "visibility": "on"
            }
          }]
        },
        odLinedata:[],
        odData_dongcheng:[],
        odData_xicheng:[],
        odData_chaoyang:[],
        odData_changping:[],
        odData_daxing:[],
        odData_fangshan:[],
        odData_fengtai:[],
        odData_haidian:[],
        odData_huairou:[],
        odData_mentougou:[],
        odData_shijingshan:[],
        odData_shunyi:[],
        odData_tongzhou:[],
        odData_yanqing:[],
        downSelectData: ''
      };
    },
    computed: {},
    beforeCreate() {
      this.$store.commit('loadMenuDataLineOD')
    },
    // created() {
    //   this.$store.commit('loadMenuDataLineOD')
    //   // this.getDate()
    // },
    mounted () {
      this.init()
      // this.getbmap();
    },
    methods: {
      handleSelectChange(val){
        let downSelectData = this.$refs.getSelectData.getCheckedNodes()
        this.downSelectData = downSelectData[0].data.value
        console.log(this.downSelectData,'获取下拉节点的值');
      },

      init() {
        this.map = this.$echarts.init(this.$refs.map)
        this.map.setOption({
          bmap: {
            center: [116.4, 39.95],
            zoom: 12,
            roam: true,
          }, //bmap
        })
        this.map.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
      },
      getDate(){
        console.log(this.downSelectData,'getDate');
        this.request.get("/lineData/clickOD",
            {
              params:{
                downSelectData: this.downSelectData,
              }
            }).then(res => {
              this.odData_dongcheng=[],
              this.odData_xicheng=[],
              this.odData_chaoyang=[],
              this.odData_changping=[],
              this.odData_daxing=[],
              this.odData_fangshan=[],
              this.odData_fengtai=[],
              this.odData_haidian=[],
              this.odData_huairou=[],
              this.odData_mentougou=[],
              this.odData_shijingshan=[],
              this.odData_shunyi=[],
              this.odData_tongzhou=[],
              this.odData_yanqing=[],
          this.odLinedata = res.data
          console.log(this.odLinedata,'odLinedata');
          for (let i = 0; i < this.odLinedata.length; i++) {
            if(this.odLinedata[i].name === 'dongcheng'){
              this.odData_dongcheng.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'xicheng'){
              this.odData_xicheng.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'chaoyang'){
              this.odData_chaoyang.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'changping'){
              this.odData_changping.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'daxing'){
              this.odData_daxing.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'fangshan'){
              this.odData_fangshan.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'fengtai'){
              this.odData_fengtai.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'haidian'){
              this.odData_haidian.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'huairou'){
              this.odData_huairou.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'mentougou'){
              this.odData_mentougou.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'shijingshan'){
              this.odData_shijingshan.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'shunyi'){
              this.odData_shunyi.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'tongzhou'){
              this.odData_tongzhou.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
            if(this.odLinedata[i].name === 'yanqing'){
              this.odData_yanqing.push({
                coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
              })
            }
          }
          console.log(ODData.odData_dongcheng,'ODData.odData_dongcheng前端js数据');
          console.log(this.odData_dongcheng,'this.odData_dongcheng后端返回数据');
          console.log(this.odData_dongcheng[0].coords,'this.odData_dongcheng');
          this.getbmap()
        })
      },
      getbmap() {
        let option= {
          baseOption : {
            bmap: {
              // 百度地图中心经纬度
              center: [116.4, 39.95],
              // 百度地图缩放
              zoom: 12,
              // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
              roam: true,
              // 百度地图的自定义样式，
              mapStyle: {
              },
            },
            roam: true,   //是否开启鼠标缩放和平移漫游
            title: {
              text: 'OD流飞线图',
              right: '20px',
              top: 26,
              textStyle: {
                fontSize: 23,
                color: '#feb64d'
              }
            },
            // 地图飞线样式选项
            //geo: geo,
            series: [
              {
                name:'Taxi',  //名称
                type: 'lines',    //线图
                coordinateSystem: 'bmap',
                progressive:1e6,
                //progressiveThreshold:100000,
                blendMode: 'lighter',
                hoverAnimation: false,
                //zlevel: 3,
                effect: {
                  show: true,
                  constantSpeed: 30,
                  //period: 3, //箭头指向速度，值越小速度越快
                  trailLength: 0.6, //特效尾迹长度[0,1]值越大，尾迹越长重
                  trailWidth: 1,
                  //trailOpacity: 0.5,
                  //symbol: 'arrow', //箭头图标
                  symbolSize: 1.5, //图标大小
                },
                postEffect: {
                  enable: true
                },
                lineStyle: {
                  normal: {
                    width: 0.2, //线条宽度
                    opacity: 0.2, //尾迹线条透明度
                    color: 'rgb(0, 38, 70,1)' // 100% 处的颜色
                    //curveness: .3 //尾迹线条曲直度
                  },
                },
                //data:this.taxi_ODData
              }],
            timeline: {
              axisType: 'category',
              autoPlay: false,
              playInterval: 10000,
              bottom:'45px',
              lineStyle:{
                color:'#6495ed',
                shadowColor:'#a9a9a9',
                labelColor:'#c0c0c0'
              },
              label:{
                normal:{color:"#fffdd0"},
                emphasis:{color:"#fffdd0"}
              },
              itemStyle:{
                normal:{
                  color:'#00008b',
                  shadowColor:'#a9a9a9',
                },
                emphasis:{
                  color:'#ffebcd'
                }
              },
              checkpointStyle:{
                color:'#6495ed',
                borderColor:'#ffebcd',
                borderWidth:1
              },
              controlStyle:{
                normal:{
                  color:'#6495ed',
                  borderColor:'#6495ed'
                },
                emphasis:{
                  color:'#4b0082',
                  borderColor:'#ffebcd'
                }
              },
              data: ['东城区', '西城区','朝阳区','昌平区','大兴区','房山区','丰台区','海淀区','怀柔区','门头沟区','石景山区','顺义区','通州区','延庆区'],
              zlevel: 4,
            },
          },
          options:[
            {series: [{data: this.odData_dongcheng}]},
            {series: [{data: this.odData_xicheng}]},
            {series: [{data: this.odData_chaoyang}]},
            {series: [{data: this.odData_changping}]},
            {series: [{data: this.odData_daxing}]},
            {series: [{data: this.odData_fangshan}]},
            {series: [{data: this.odData_fengtai}]},
            {series: [{data: this.odData_haidian}]},
            {series: [{data: this.odData_huairou}]},
            {series: [{data: this.odData_mentougou}]},
            {series: [{data: this.odData_shijingshan}]},
            {series: [{data: this.odData_shunyi}]},
            {series: [{data: this.odData_tongzhou}]},
            {series: [{data: this.odData_yanqing}]}
          ]
        }
        let map = echarts.init(this.$refs.map)
        map.setOption(option) // 获取到的百度地图对象bmap适用于所有的百度地图的接口

        let bmap = map.getModel().getComponent('bmap').getBMap()
        bmap.setMapStyle(this.mapStyle)

        bmap.setMinZoom(11)
        // 设置最大缩放值
        bmap.setMaxZoom(15)
      }
    },
  }
</script>

<style scoped>
  #app{
    position: relative;
    height:100%;
    width:100%;
  }
  #menuLeft {
    position: absolute;
    top: 20px;
    left: 12px;
    width: 22%;
    height: 30%;
    z-index: 100;
    font-size: 20px;
    font-weight: 700;
    color: white;
    background-color: rgba(49, 51, 53, 0.7);
    background-image: url("../../assets/image/public_resource/border_new1.png");
    background-size: 100% 100%;
    /*opacity: 0.8;*/
    border-radius: 20px;
    overflow: auto;
  }
  #step1{
    margin-left: 45px;
  }
  #step2{
    margin-left: 45px;
  }
</style>
